<template>
    <div :id="idTime" :style="{ width: '100%', height: height + 'px' }"></div>
</template>

<script lang="ts" setup>

/*
面积图又叫区域图。 它是在折线图的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充，这样一个填充区域我们叫做面积，颜色的填充可以更好的突出趋势信息。

## API

### v2-mini-area

| 参数 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[repaint]` | 数据再次变更时是否重绘 | `boolean` | `true` |
| `[delay]` | 延迟渲染，单位：毫秒 | `number` | `0` |
| `[title]` | 图表标题 | `string,TemplateRef<void>` | - |
| `[color]` | 图表颜色 | `string` | `rgba(24, 144, 255, 0.85)` |
| `[padding]` | 图表内部间距 | `Array<number | string> | string` | `[32, 0, 32, 40]` | 左 上 右 下
| `[height]` | 图表高度 | `number` | - |
| `[data]` | 数据 | `v2BarData{}` | `{}` |
| `[autoLabel]` | 在宽度不足时，自动隐藏 x 轴的 label | `boolean` | `true` |
| `[interaction]` | 交互类型，none 无 element-active 图形元素，active-region 图表组件，brush 框选，drag-move 移动 | `InteractionType` | `none` |
| `[theme]` | 定制图表主题 | `string | LooseObject` | - |
| `(clickItem)` | 点击项回调 | `EventEmitter<G2BarClickItem>` | - |

### G2BarData

| 参数 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[x]` | x轴 | `Array<string | number>` | - |
| `[y]` | y轴 | `Array<string | number | {value: string | number,itemStyle: color}>` | - |
| `[color]` | 轴颜色 | `string` | - |

*/

import * as echarts from 'echarts'
import { emit } from 'process';
import { defineProps, defineEmits, onMounted, onUnmounted, useAttrs, watch, ref } from 'vue'

const Emits = defineEmits(['clickItem'])

const props = defineProps({
    repaint: {
        type: Boolean,
        default: true
    },
    delay: {
        type: Number,
        default: 0
    },
    color: {
        type: String,
        default: 'rgba(24, 144, 255, 0.2)'
    },
    height: {
        type: Number,
        default: 44
    },

    title: {
        type: String,
        default: ''
    },
    animate: {
        type: Boolean,
        default: true
    },
    padding: {
        type: Array,
        default: [8, 8, 8, 8]
    },
    autoLabel: {
        type: Boolean,
        default: true
    },
    data: {
        type: Object,
        default: {}
    },

    tooltipType: {
        type: String,
        default: 'default'
    },
})

const myChart = ref()

//生成 图表 id
let idTime = 'ec_' + String(new Date().getTime())
let idcreat = false
//防止生成的id重叠
if (!!document.getElementById(idTime)) {
    idTime = 'ec_' + String(new Date().getTime() + 1)
    idcreat = true
} else {
    idcreat = true
}


onMounted(() => {
    setTimeout(() => {
        if (idcreat) {
            myChart.value = v2MiniBar()
        }
    });
})

//销毁组件取消监听
onUnmounted(() => {
    removeEventListener("resize", v2Areathrottle, false)
})

if (props.repaint) {
    watch(() => [props.data], (data, predata) => {
        //判断数据是否相同
        if (!(JSON.stringify(data) == JSON.stringify(predata))) {
            reload(data)
        }
    })
}


//防抖函数
const v2Areathrottle: any = function (fn: any, wait: any) {
    let timer: any = null;
    return function () {
        let context = {};
        let args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(context, args);
                timer = null;
            }, wait)
        }
    }
}


//刷新数据
const reload = (data: any) => {

    const option = myChart.value.getOption();
    option.xAxis = data[0].x
    option.series[0].data = data[0].y;
    myChart.value.setOption(option);
}

//渲染
const v2MiniBar = () => {
    let myChart = echarts.init(document.getElementById(idTime) as HTMLElement);
    const option = {
        //图例
        legend: false,
        grid: {
            left: props.padding[0],
            top: props.padding[1],
            right: props.padding[2],
            bottom: props.padding[3],
            show: false,
            containLabel: true,
            width: '100%',
        },
        title: {
            show: props.title == '' ? false : true,
            text: props.title,
            textStyle: {
                color: '#999999',
                fontWeight: 'normal',
                fontSize: '14'
            }
        },
        xAxis: {
            type: 'category',
            nameGap: 60,
            data: props.data.x,
        },
        animation: props.animate,
        animationDelay: props.delay,
        yAxis: {
            type: 'value',
        },
        tooltip: {
            //是否显示提示框组件
            show: true,
        },
        series: [
            {
                data: props.data.y,
                type: 'bar',
                itemStyle: {
                    color: props.color
                },
                barMaxWidth: 46
            }
        ]
    };
    myChart.setOption(option);
    //屏幕自适应
    window.addEventListener("resize", v2Areathrottle(() => { myChart.resize() }, 200))
    myChart.on('click', function (params) {
        Emits('clickItem', params)
    })

    return myChart
}




</script>
<script lang="ts">
export default {
    name: 'v2-bar'
}
</script>
<style lang="less" scoped>
</style>